<template>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" label-position="top">
        <el-form-item label="母包" prop="base_apk">
            <el-select v-model="form.base_apk" clearable class="filter-item" placeholder="母包" style="width: 500px;">
                <el-option
                    v-for="(item, index) in baseList"
                    :key="index"
                    :label="`${item.name} | ${item.size} | ${item.mtime}`"
                    :value="item.name">
                </el-option>
            </el-select>
            <el-button type="primary" :loading="loading" @click="submit">确定</el-button>
        </el-form-item>
        <el-form-item label="渠道" prop="sources">
            <checkbox-app-source v-model="form.sources"></checkbox-app-source>
        </el-form-item>
<!--        <el-form-item>-->
<!--            <el-button type="primary" :loading="loading" @click="submit">确定</el-button>-->
<!--            <el-button @click="cancel">返回</el-button>-->
<!--        </el-form-item>-->
    </el-form>
</template>

<script>
import CheckboxAppSource from "~/components/Checkbox/app-source.vue";

export default {
        props: {
            data: {
                type: Array,
                default: [],
            }
        },
        components: {
            CheckboxAppSource,
        },
        data() {
            return {
                loading: false,
                form: {
                    sources: [],
                    base_apk: '',
                },
                rules: {
                    sources: [
                        { required: true, message: '请选择关联渠道', trigger: 'blur' },
                    ],
                    base_apk: [
                        { required: true, message: '请选择关联母包', trigger: 'blur' },
                    ],
                },
            }
        },
        computed: {
            baseList() {
                return this.$store.state.apk.baseList;
            },
        },
        watch: {
            data (newVal) {
                this.syncForm();
            }
        },
        methods: {
            getFormAction() {
                return 'apk/BatchUpdate';
            },
            submit() {
                this.$refs.form.validate(valid => {
                    if (!valid) return false;
                    this.loading = true;
                    this.$store.dispatch(this.getFormAction(), this.form).then(res => {
                        this.$message.success(res.data.message);
                        this.$emit('submit');
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            },
            cancel() {
                this.$emit('cancel');
            },
            syncForm() {
                this.form.sources = [];
                if (this.data.length) {
                    // this.form.ids = this.data.map(v => v.id);
                    this.form.sources = this.data.map(v => v.source);
                }
            },
            getBaseList() {
                if (!this.baseList.length) this.$store.dispatch('apk/BaseList');
            },
        },
        created () {
            this.syncForm();

            this.getBaseList();
        }
    }
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
</style>

